<template>
  <div>
    <Header title="综合解决方案分析"></Header>
    <div class="page__main bg-white">
      <div class="page__scroller">
        <div class="water-mark-wrap">
          <div class="title-bg">
            {{datePicker.showData}}综合解决方案分析
            <button type="button" class="title-bg__btn" @click="tipDialog.show = true"></button>
          </div>
          <van-sticky :offset-top="46">
            <div class="pd-aside bg-white" style="padding-top: 10px;">
              <div class="selects" style="margin-bottom: 0">
                <div class="selects__item" @click="chooseDate">
                  {{datePicker.showData}}
                </div>
                <div class="selects__item" @click="chooseCity('province')">
                  {{areaInfo.showArea}}
                </div>
                <div class="selects__item" @click="chooseCity('city')">
                  {{cityInfo.showArea}}
                </div>
              </div>
            </div>
          </van-sticky>
          <van-tabs v-model="tabActiveName" class="init-tabs resolve-tabs" sticky :offset-top="89" @click="handleTabClick">
            <van-tab name="a" title="分业务">
              <div class="box">
                <div class="business-intro">
                  <div class="business-intro__main">
                    <div
                      class="business-intro__item"
                      v-for="(item, index) in summaryData.data"
                      :key="index"
                    >
                      <div
                        class="business-intro__inner"
                        :class="summaryData.active == item.idCode ? 'business-intro__inner--current' : ''"
                        @click="handleTypeChange(item.idCode)"
                      >
                        <div class="business-intro__intro">{{item.name}}</div>
                        <div class="mgb-4">
                          <van-loading size="14px" v-show="dataLoading"></van-loading>
                          <span class="business-intro__num">{{item.num}}</span>
                          {{item.unit}}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="case-title" v-show="barChartShow">
                  <span class="case-title__name">整体情况</span>
                </div>
                <div style="height: 250px;" v-show="barChartShow">
                  <BarChart :data="partBarData"></BarChart>
                </div>
                <div class="case-title">
                  <span class="case-title__name">变化趋势</span>
                </div>
                <div style="height: 180px;">
                  <LineChart :data="partLineData"></LineChart>
                </div>
              </div>
              <div class="footer-tip mgb-15">了解更多信息，请登录PC端运营数据展示系统</div>
            </van-tab>
            <van-tab name="b" title="提出方">
              <div class="box">
                <div style="height: 200px;">
                  <PieChart :data="pieData"></PieChart>
                  <div class="pie-legend">
                    <div v-for="(item, index) in pieData.data" :key="index" class="pie-legend__item" :class="'pie-legend__item--' + item.color">
                      <div class="pie-legend__name">{{item.name}}</div>
                      <div class="pie-legend__nums"><span>{{item.value}}</span><span class="pie-legend__per">{{item.percentage}}%</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab name="c" title="订单流程">
              <div class="box">
                <div class="mgb-15" style="min-height: 190px;">
                  <van-loading size="24px" vertical v-show="dataLoading">数据加载中...</van-loading>
                  <div class="case-progress" v-for="(item, index) in orderData" :key="index">
                  <div class="case-progress__title">{{item.name}}</div>
                  <div class="case-progress__inner">
                    <div class="case-progress__main">
                      <van-progress
                        :percentage="item.percentage"
                        stroke-width="8"
                        color="linear-gradient(to right, #FF3837, #FF9090)"
                        :show-pivot="false"
                        track-color="#F9F8F7"
                      ></van-progress>
                    </div>
                    <div class="case-progress__num">{{numFormat(item.value)}}个</div>
                  </div>
                </div>
                </div>
                <div class="projects mgb-15">
                  <div class="projects__main">
                    <div class="projects__item" v-for="(item, index) in orderFlow.type" :key="index" style="width: 50%">
                      <span
                        class="projects__inner"
                        :class="orderFlow.active == item.id ? 'projects__inner--current' : ''"
                        @click="handleChangeFlow('order', item.id)"
                      >
                        {{item.name}}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="case-title" v-show="barChartShow">
                  <span class="case-title__name">整体情况</span>
                </div>
                <div style="height: 250px;" v-show="barChartShow">
                  <BarChart :data="orderBarData"></BarChart>
                </div>
                <div class="case-title">
                  <span class="case-title__name">变化趋势</span>
                </div>
                <div style="height: 180px;">
                  <LineChart :data="orderLineData"></LineChart>
                </div>
              </div>
              <div class="footer-tip mgb-15">了解更多信息，请登录PC端运营数据展示系统</div>
            </van-tab>
            <van-tab name="d" title="项目流程">
              <div class="box">
                <div class="mgb-15" style="min-height: 190px;">
                  <van-loading size="24px" vertical v-show="dataLoading">数据加载中...</van-loading>
                  <div class="case-progress" v-for="(item, index) in projectData" :key="index">
                    <div class="case-progress__title">{{item.name}}</div>
                    <div class="case-progress__inner">
                      <div class="case-progress__main">
                        <van-progress
                          :percentage="item.percentage"
                          stroke-width="8"
                          color="linear-gradient(to right, #FF3837, #FF9090)"
                          :show-pivot="false"
                          track-color="#F9F8F7"
                        ></van-progress>
                      </div>
                      <div class="case-progress__num">{{numFormat(item.value)}}个</div>
                    </div>
                  </div>
                </div>
                <div class="projects mgb-15">
                  <div class="projects__main">
                    <div class="projects__item" v-for="(item, index) in projectFlow.type" :key="index" style="width: 33.33%">
                      <span
                        class="projects__inner"
                        :class="projectFlow.active == item.id ? 'projects__inner--current' : ''"
                        @click="handleChangeFlow('project', item.id)"
                      >
                        {{item.name}}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="case-title" v-show="barChartShow">
                  <span class="case-title__name">整体情况</span>
                </div>
                <div style="height: 250px;" v-show="barChartShow">
                  <BarChart :data="projectBarData"></BarChart>
                </div>
                <div class="case-title">
                  <span class="case-title__name">变化趋势</span>
                </div>
                <div style="height: 180px;">
                  <LineChart :data="projectLineData"></LineChart>
                </div>
              </div>
              <div class="footer-tip mgb-15">了解更多信息，请登录PC端运营数据展示系统</div>
            </van-tab>
          </van-tabs>
          <WaterMark :length="6"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="datePicker.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePicker.currentDate"
        type="year-month"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        :formatter="formatter"
        @cancel="handleCanleDate"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="cancelFn('province')"
        @confirm="confirmFnProvince"
      ></van-picker>
    </van-popup>
    <van-popup
      v-model="cityInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="cityInfo.columns"
        :defaultIndex='cityInfo.defaultIndex'
        @cancel="cancelFn('city')"
        @confirm="confirmFnCity"
      ></van-picker>
    </van-popup>
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header"
import PieChart from '@/components/PieChartVertical'
import Choose from "@/components/Choose"
import LineChart from "@/components/LineChartBlue"
import BarChart from "@/components/BarChartScroll"
import WaterMark from '@/components/WaterMark'

export default {
  components: {
    Header,
    PieChart,
    Choose,
    LineChart,
    BarChart,
    WaterMark
  },
  data() {
    return {
      tabActiveName: 'a',
      areaId: this.$store.state.userInfo.home_city,
      userInfo: this.$store.state.userInfo,
      role: sessionStorage.getItem('role'),
      datePicker: {
        showData: '--年--月',
        selectDate: '',
        show: false,
        currentDate: new Date(),
        minDate: new Date(),
        maxDate: new Date(),
      },
      areaInfo: {
        show: false,
        defaultIndex: 0,
        showArea: '',
        selectId: this.$store.state.userInfo.home_city,
        columns: []
      },
      cityInfo: {
        show: false,
        defaultIndex: 0,
        showArea: "地市",
        selectId: "0",
        columns: []
      },
      dataLoading: true,
      summaryData: {
        active: '1233',
        data: [
          {
            name: '综合解决方案数',
            num: '',
            unit: '个',
            id: '1',
            idCode: '1233',
          },
          {
            name: '塔类需求数',
              num: '',
            unit: '个',
            id: '2',
            idCode: '1234',
          },
          {
            name: '楼宇室分覆盖面积',
              num: '',
            unit: 'km²',
            id: '3',
            idCode: '1235',
          },
          {
            name: '隧道室分长度',
              num: '',
            unit: '公里',
            id: '4',
            idCode: '1236',
          },
          {
            name: '微站点位数',
              num: '',
            unit: '个',
            id: '5',
            idCode: '1237',
          },
          {
            name: '传输公里数',
              num: '',
            unit: '公里',
            id: '6',
            idCode: '1238',
          },
        ]
      },
      pieData: {
        unit: '个',
        data: []
      },
      orderData: [],
      projectData: [],
      partLineData: {
        data: [],
        unit: '个',
      },
      partBarData: {
        data: [],
        unit: '个',
      },
      orderFlow: {
        active: '1243',
        type: [
          {name: '需求承接数', id: '1243'},
          {name: '签约订单数', id: '1244'},
          {name: '已交付订单数', id: '1245'},
          {name: '已起租订单数', id: '1246'},
        ]
      },
      projectFlow: {
        active: '1247',
        type: [
          {name: '立项项目数', id: '1247'},
          {name: '设计项目数', id: '1248'},
          {name: '已开工项目数', id: '1249'},
          {name: '已内验项目数', id: '1250'},
          {name: '已交付项目数', id: '1251'},
          {name: '正式竣工决算数', id: '1252'}
        ]
      },
      orderBarData: {
        data: [],
        unit: '个',
      },
      orderLineData: {
        data: [],
        unit: '个',
      },
      projectBarData: {
        data: [],
        unit: '个',
      },
      projectLineData: {
        data: [],
        unit: '个',
      },
      barChartShow: true,
      tipDialog: {
        show: false,
        list: [
          {
            title: '综合解决方案数',
            detail: '将运营商批次号以TTZH开头，第五位为C或T的订单（综合解决方案订单），按运营商批次号进行去重统计，即为综合解决方案数'
          },
          {
            title: '塔类需求数',
            detail: '在综合解决方案已承接需求中，需求类型为塔类的订单，即为塔类需求数'
          },
          {
            title: '楼宇室分覆盖面积',
            detail: '在综合解决方案已承接需求中，需求类型为楼宇室分的订单，其室分面积数合计'
          },
          {
            title: '隧道室分长度',
            detail: '在综合解决方案已承接需求中，需求类型为隧道室分的订单，其隧道公里数合计'
          },
          {
            title: '微站点位数',
            detail: '在综合解决方案已承接需求中，需求类型为微站的订单，其微站点位数合计'
          },
          {
            title: '传输公里数',
            detail: '在综合解决方案已承接需求中，需求类型为传输的订单，其隧道长度合计'
          },
          {
            title: '主动提出',
            detail: 'CRM系统中需求承接表中，运营商批次号取TTZH开头，第五位为C的需求编码去重统计，即为主动提出综合解决方案数'
          },
          {
            title: '移动提出',
            detail: '统一业务平台中需求承接表中运营商批次号取TTZH开头，第五位为T且状态为提交或已承接，且运营商类别为移动的需求单数据去重统计，即为移动提出综合解决方案数'
          },
          {
            title: '联通提出',
            detail: '统一业务平台中需求承接表中运营商批次号取TTZH开头，第五位为T且状态为提交或已承接，且运营商类别为联通的需求单数据去重统计，即为联通提出综合解决方案数'
          },
          {
            title: '电信提出',
            detail: '统一业务平台中需求承接表中运营商批次号取TTZH开头，第五位为T且状态为提交或已承接，且运营商类别为电信的需求单数据去重统计，即为电信提出综合解决方案数'
          },
          {
            title: '订单流程-需求承接数',
            detail: '综合解决方案需求单中，状态为‘需求承接’及其后状态，且需求提出时间小于等于统计期的订单数'
          },
          {
            title: '订单流程-签约订单数',
            detail: '综合解决方案需求单中，状态为‘签约订单’及其后状态，且订单签约时间小于等于统计期的订单数'
          },
          {
            title: '订单流程-已交付订单数',
            detail: '综合解决方案需求单中，状态为‘已交付’及其后状态，且实际交付时间小于等于统计期的订单数'
          },
          {
            title: '订单流程-已起租订单数',
            detail: '综合解决方案需求单中，状态为‘已起租’及其后状态，且起租时间小于等于统计期的订单数'
          },
          {
            title: '项目流程-立项项目数',
            detail: '综合解决方案项目中，项目状态为‘立项批复’，且立项时间小于等于统计期的项目数'
          },
          {
            title: '项目流程-设计项目数',
            detail: '综合解决方案项目中，项目状态为‘设计批复’，且设计批复时间小于等于统计期的项目数'
          },
          {
            title: '项目流程-已开工项目数',
            detail: '综合解决方案项目中，项目状态为‘项目施工’及其后状态，且实际开工时间小于等于统计期的项目数'
          },
          {
            title: '项目流程-已内验项目数',
            detail: '综合解决方案项目中，项目状态为‘内部验收’，且内部验收结束时间小于等于统计期的项目数'
          },
          {
            title: '项目流程-已交付项目数',
            detail: '综合解决方案项目中，项目对应的订单至少有一单为‘已交付’状态，且实际交付时间小于等于统计期的项目数'
          },
          {
            title: '项目流程-正式竣工决算项目数',
            detail: '综合解决方案项目中，项目的正式竣工决算时间为非空，且小于等于统计期的项目数'
          },
        ]
      }
    };
  },
  methods: {
    numFormat(num) {
      return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
    },
    //显示地市弹框
    chooseCity(area) {
      if (area == 'province') {
        this.areaInfo.show = true
      } else if (area == 'city') {
        this.cityInfo.show = true
      }
    },
    //取消地市弹框
    cancelFn(area) {
      if (area == 'province') {
        this.areaInfo.show = false
      } else if (area == 'city') {
        this.cityInfo.show = false
      }
    },
    //确认省份
    confirmFnProvince(item, index) {
      if (this.areaInfo.selectId != item.id) {
        this.areaInfo.selectId = item.id
        this.areaId = item.id
        this.areaInfo.showArea = item.text
        this.cityInfo.columns = []
        this.cityInfo.showArea = '地市'
        this.barChartShow = true
        if (this.role == 'province') {
          if (this.areaId != '100000') {
            this.areaInfo.columns = []
            this.getAreaInfo()
          } else {
            this.cityInfo.columns = [{text: '地市', id: '0'}]
          }
        } else {
          this.getAreaInfo()
        }
        this.initPage()
      }
      this.areaInfo.show = false
    },
    //确认地市
    confirmFnCity(item, index) {
      if (this.cityInfo.selectId != item.id) {
        this.cityInfo.selectId = item.id
        this.cityInfo.showArea = item.text
        if (this.cityInfo.selectId != '' && this.cityInfo.selectId != 0) {
          this.areaId = item.id
          this.barChartShow = false
        } else {
          this.areaId = this.areaInfo.selectId
          this.barChartShow = true
        }
        
        if (this.cityInfo.selectId.substr(-4) == '0000') {
          this.barChartShow = true
        }
        
        this.initPage()
      }
      this.cityInfo.show = false
    },
    //格式化时间
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }
      return value;
    },
    //切换
    handleTypeChange(code) {
      if (this.summaryData.active != code) {
        this.summaryData.active = code
        if (code == '1235') {
          this.partLineData.unit = 'm²'
          this.partBarData.unit = 'm²'
        } else if (code == '1236' || code == '1238') {
          this.partLineData.unit = '公里'
          this.partBarData.unit = '公里'
        } else {
          this.partLineData.unit = '个'
          this.partBarData.unit = '个'
        }
        this.getPartData()
      }
    },
    handleChangeFlow(type, id) {
      if (type == 'order') {
        if (this.orderFlow.active != id) {
          this.orderFlow.active = id
          this.getFlowData('order')
        }
      } else if (type == 'project') {
        if (this.projectFlow.active != id) {
          this.projectFlow.active = id
          this.getFlowData('project')
        }
      }
    },
    //tab切换
    handleTabClick(name, title) {
      if (name == 'c') {
        if (this.orderData.length > 0) {
          let newData = JSON.parse(JSON.stringify(this.orderData))
          this.orderData = []
          this.$nextTick(() => {
            this.orderData = JSON.parse(JSON.stringify(newData))
          })
        }
        this.$nextTick().then(() => {
          this.getFlowData('order')
        })
      } else if (name == 'd') {
        if (this.projectData.length > 0) {
          let newData = JSON.parse(JSON.stringify(this.projectData))
          this.projectData = []
          this.projectData = JSON.parse(JSON.stringify(newData))
        }
        this.getFlowData('project')
      } else if (name == 'a') {
        this.getPartData()
      }
    },
    //日期选择
    chooseDate() {
      this.datePicker.show = true
    },
    //取消日期设置
    handleCanleDate() {
      this.datePicker.show = false
    },
    //选择日期
    handleConfirmDate(value) {
      this.handleCanleDate()
      let date = new Date(value)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let month1 = month < 10 ? '0' + month : month
      let chooseDate = year + '' + month1
      if (this.datePicker.selectDate != chooseDate) {
        this.datePicker.showData = year + '年' + month + '月'
        this.datePicker.selectDate = year + '' + month1
        this.initPage()
      }
    },
    //获得时间域
    getMaxMinMonth() {
      function dateSplit(param) {
        let paramStr = param + ''
        let dateArr = paramStr.replace(/(.{4})/g,'$1,').split(',')
        return dateArr
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/yearCheckIndex/maxMonth', {type: '4'}).then(data => {
          let max = data.maps[0].MAX_MONTH
          let min = data.maps[0].MIN_MONTH
  
          let maxYear = dateSplit(max)[0]
          let maxMonth = dateSplit(max)[1]
          let minYear = dateSplit(min)[0]
          let minMonth = dateSplit(min)[1]
          let actualMaxMonth = parseInt(maxMonth) - 1
          let actualMinMonth = parseInt(minMonth) - 1
          let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
          
          this.datePicker.currentDate = new Date(maxYear, actualMaxMonth)
          this.datePicker.minDate = new Date(minYear, actualMinMonth)
          this.datePicker.maxDate = new Date(maxYear, actualMaxMonth)

          this.datePicker.showData = maxYear + '年' + showMaxMonth + '月'
          this.datePicker.selectDate = maxYear + '' + maxMonth
        
          resolve("ok")
        })
      })
    },
    //获得全国各省列表
    getAreaInfo() {
      let params = {
        statMonth: this.datePicker.selectDate,
        areaId: this.areaId
      }
    
      this.$http
        .post("api/yearCheckIndex/getKpiAreaInfo", params)
        .then(data => {
          //获取省会
          if (data.rows.length > 1) {
            this.areaInfo.columns = []
            data.rows.forEach(item => {
              this.areaInfo.columns.push({
                text: item.area,
                id: item.areaId
              })
            })
            this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.showArea = '全国'
          }
          //获取地市
          if (data.rows2.length > 1) {
            this.cityInfo.columns = []
            data.rows2.forEach(item => {
              this.cityInfo.columns.push({
                text: item.area,
                id: item.areaId
              });
            });
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.selectId = data.rows[0].areaId
            this.areaInfo.showArea = data.rows[0].area
            if (this.role == "province") {
              this.areaInfo.columns.push(
                {
                  text: '全国', id: '100000'
                },
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              )
              this.areaInfo.defaultIndex = 1
            }
          } else if (data.rows2.length == 1 ) {
            if (this.role == "city") {
              let pro = this.areaId.substring(0,2) + '0000'
              this.areaInfo.selectId = data.rows[0].areaId
              this.areaInfo.showArea = data.rows[0].area
              this.areaInfo.columns = [
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              ]
              this.cityInfo.selectId = data.rows2[0].areaId
              this.cityInfo.showArea = data.rows2[0].area
              this.cityInfo.defaultIndex = 1
              this.cityInfo.columns = [
                {
                  text: '全省',
                  id: pro
                },
                {
                  text: data.rows2[0].area,
                  id: data.rows2[0].areaId
                }
              ]
            }
          }
        });
    },
    //获得汇总数据
    getPageData() {
      let params = {
        statMonth: this.datePicker.selectDate,
        areaId: this.areaId
      }
      this.dataLoading = true
      
      this.summaryData.data[0].num = ''
      this.summaryData.data[1].num = ''
      this.summaryData.data[2].num = ''
      this.summaryData.data[3].num = ''
      this.summaryData.data[4].num = ''
      this.summaryData.data[5].num = ''
      this.pieData.data = []
      this.orderData = []
      this.projectData = []
      this.$http.post('/api/solve/solvePage', params).then(res => {
        if (res.solvePage.length > 0) {
          let data = res.solvePage[0]
          let pieTotal = data.COUNT7 + data.COUNT8 + data.COUNT9 + data.COUNT10
          let orderDataMax = Math.max.call('', data.COUNT11, data.COUNT12, data.COUNT13, data.COUNT14) + 10
          let proDataMax = Math.max.call('', data.COUNT15, data.COUNT16, data.COUNT17, data.COUNT18, data.COUNT19, data.COUNT20) + 10
          pieTotal = (pieTotal == 0 ? 100 : pieTotal)
          
          this.summaryData.data[0].num = this.numFormat(data.COUNT1)
          this.summaryData.data[1].num = this.numFormat(data.COUNT2)
          this.summaryData.data[2].num = this.numFormat(data.COUNT3)
          this.summaryData.data[3].num = this.numFormat(data.COUNT4)
          this.summaryData.data[4].num = this.numFormat(data.COUNT5)
          this.summaryData.data[5].num = this.numFormat(data.COUNT6)
  
          this.pieData.data.push(
            {
              name: '主动提出',
              value: data.COUNT7,
              percentage: ((data.COUNT7 / pieTotal)*100).toFixed(2),
              color: 'red',
            },
            {
              name: '移动提出',
              value: data.COUNT8,
              percentage: ((data.COUNT8 / pieTotal)*100).toFixed(2),
              color: 'yellow',
            },
            {
              name: '联通提出',
              value: data.COUNT9,
              percentage: ((data.COUNT9 / pieTotal)*100).toFixed(2),
              color: 'blue',
            },
            {
              name: '电信提出',
              value: data.COUNT10,
              percentage: ((data.COUNT10 / pieTotal)*100).toFixed(2),
              color: 'green',
            },
          )
  
          this.orderData.push(
            {name: '需求承接数', value: data.COUNT11, percentage: data.COUNT11 * 100 / orderDataMax},
            {name: '签约订单数', value: data.COUNT12, percentage: data.COUNT12 * 100 / orderDataMax},
            {name: '已交付订单数', value: data.COUNT13, percentage: data.COUNT13 * 100 / orderDataMax},
            {name: '已起租订单数', value: data.COUNT14, percentage: data.COUNT14 * 100 / orderDataMax},
          )
  
          this.projectData.push(
            {name: '立项项目数', value: data.COUNT15, percentage: data.COUNT15 * 100 / proDataMax},
            {name: '设计项目数', value: data.COUNT16, percentage: data.COUNT16 * 100 / proDataMax},
            {name: '已开工项目数', value: data.COUNT17, percentage: data.COUNT17 * 100 / proDataMax},
            {name: '已内验项目数', value: data.COUNT18, percentage: data.COUNT18 * 100 / proDataMax},
            {name: '已交付项目数', value: data.COUNT19, percentage: data.COUNT19 * 100 / proDataMax},
            {name: '正式竣工决算项目数', value: data.COUNT20, percentage: data.COUNT20 * 100 / proDataMax},
          )
          
          this.dataLoading = false
        }
      })
    },
    //获得分业务数据
    getPartData() {
      let params = {
        statMonth: this.datePicker.selectDate,
        areaId: this.areaId,
        idCode: this.summaryData.active
      }
      this.partLineData.data = []
      this.partBarData.data = []
      this.$http.post('api/solve/solvePageClick', params).then(res => {
        let lineData = res.solvePagechart.reverse()
        let list = res.solvePageClick || []
      
        lineData.forEach(item => {
          this.partLineData.data.push({
            date: item.id,
            value: item.name,
          })
        })
  
        list.forEach(item => {
          this.partBarData.data.push({
            date: item.COL1,
            value: item.COL2,
          })
        })
      })
    },
    //获得流程数据
    getFlowData(type) {
      let params = {
        statMonth: this.datePicker.selectDate,
        areaId: this.areaId,
      }
    
      if (type == 'order') {
        params.idCode = this.orderFlow.active
        this.orderLineData.data = []
        this.orderBarData.data = []
      } else if (type == 'project') {
        params.idCode = this.projectFlow.active
        this.projectLineData.data = []
        this.projectBarData.data = []
      }
    
      this.$http.post('api/solve/solveClick', params).then(res => {
        let lineData = res.solvePagechart.reverse()
        let list = res.solvePageClick || []
      
        if (type == 'order') {
          lineData.forEach(item => {
            this.orderLineData.data.push({
              date: item.id,
              value: item.name,
            })
          })
  
          list.forEach(item => {
            this.orderBarData.data.push({
              date: item.COL1,
              value: item.COL2,
            })
          })
        } else if (type == 'project') {
          lineData.forEach(item => {
            this.projectLineData.data.push({
              date: item.id,
              value: item.name,
            })
          })
  
          list.forEach(item => {
            this.projectBarData.data.push({
              date: item.COL1,
              value: item.COL2,
            })
          })
        }
      })
    },
    //记录日志
    recordLogs() {
      let params = {
        userId: this.userInfo.user_id,
        verify_code: this.userInfo.verify_code,
        priv_id: '10101132',
      }
    
      this.$http.post("api/new/insertLogs", params).then(res => {})
    },
    //页面初始化
    initPage() {
      this.getPageData()
      this.getPartData()
      this.getFlowData('order')
      this.getFlowData('project')
    }
  },
  created() {
    this.recordLogs()
    this.getMaxMinMonth().then(res => {
      if (res == 'ok') {
        if (this.role == 'city') {
          this.barChartShow = false
        }
        this.getAreaInfo()
        this.initPage()
      }
    })
  }
};
</script>

<style lang="scss" scoped>
  .case-title {
    padding-left: 22px;
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      background: url(~@/assets/images/icon-business.png);
      background-size: 100% 100%;
      left: 0;
      top: 50%;
      margin-top: -8px;
    }
    
    &__name {
      font-size: 18px;
    }
  }
  
  .business-intro {
    overflow: hidden;
    padding-top: 5px;
    margin-bottom: 10px;
    
    &__main {
      margin: -5px;
      overflow: hidden;
    }
    
    &__item {
      float: left;
      width: 50%;
      padding: 5px;
      box-sizing: border-box;
    }
    
    &__inner {
      text-align: center;
      border: 1px solid #e7e7e7;
      padding: 8px;
      border-radius: 8px;
      
      &--current {
        border-color: #ff7171;
      }
    }
    
    &__num {
      font-size: 20px;
    }
    
    &__intro {
      margin-bottom: 6px;
    }
    
    &__label {
      display: inline-block;
      border: 1px solid;
      padding: 0 6px;
      border-radius: 2px;
    }
    
    .van-loading {
      display: inline-block;
    }
  }
  
  .case-progress {
    margin-bottom: 10px;
    
    &__inner {
      display: flex;
      align-items: center;
    }
    
    &__main {
      flex: 1;
    }
    
    &__num {
      flex: none;
      text-align: right;
      width: 80px;
      color: #848484;
    }
  }
  
  .pie-legend {
    padding: 10px 10px;
    overflow: hidden;
    
    &__item {
      float: left;
      width: 50%;
      box-sizing: border-box;
      padding-left: 20px;
      font-size: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      
      &::before {
        content: "";
        float: left;
        width: 12px;
        height: 12px;
        background: #bbb;
        border-radius: 2px;
        margin: 5px 0 0 -20px;
      }
      
      &--red {
        &::before {
          background: #FC5D5E;
        }
      }
      &--blue {
        &::before {
          background: #56A8EE;
        }
      }
      &--green {
        &::before {
          background: #259B24;
        }
      }
      &--yellow {
        &::before {
          background: #FEB80E;
        }
      }
    }
    
    &__name {
      margin-bottom: 5px;
    }
    
    &__nums {
      color: #666;
    }
    
    &__per {
      padding-left: 15px;
    }
  }
  .projects {
    overflow: hidden;
  
    &__main {
      overflow: hidden;
      margin: -5px;
    }
  
    &__item {
      float: left;
      box-sizing: border-box;
      padding: 5px;
    }
  
    &__inner {
      display: block;
      text-align: center;
      border: 1px solid #E5E5E5;
      line-height: 2.25;
      border-radius: 5px;
      font-size: 13px;
    
      &--current {
        background: #F7777C;
        color: #fff;
        border-color: #F7777C;
      }
    }
  }
  
  /deep/
  .resolve-tabs.van-tabs--line .van-tabs__wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
</style>
